<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>订单管理</title>

    <link th:href="@{/AmazeUI-2.4.2/assets/css/admin.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/AmazeUI-2.4.2/assets/css/amazeui.css}" rel="stylesheet" type="text/css">

    <link th:href="@{/css/personal.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/orstyle.css}" rel="stylesheet" type="text/css">

    <script th:src="@{/AmazeUI-2.4.2/assets/js/jquery.min.js}"></script>
    <script th:src="@{/AmazeUI-2.4.2/assets/js/amazeui.js}"></script>

</head>

<body>
<!--头 -->
<th:block th:include="common :: header2"></th:block>
<th:block th:include="common :: category"></th:block>


<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-order">

                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单管理</strong> /
                        <small>Order</small></div>
                </div>
                <hr/>

                <div class="am-tabs am-tabs-d2 am-margin" data-am-tabs>

                    <ul class="am-avg-sm-5 am-tabs-nav am-nav am-nav-tabs">
                        <li class="am-active"><a href="#tab1">所有订单</a></li>
                        <li><a href="#tab2">待付款</a></li>
                        <li><a href="#tab3">待发货</a></li>
                        <li><a href="#tab4">待收货</a></li>
                        <li><a href="#tab5">待评价</a></li>
                    </ul>

                    <div class="am-tabs-bd">
                        <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                            <div class="order-top">
                                <div class="th th-item">
                                    <td class="td-inner">商品</td>
                                </div>
                                <div class="th th-price">
                                    <td class="td-inner">单价</td>
                                </div>
                                <div class="th th-number">
                                    <td class="td-inner">数量</td>
                                </div>
                                <div class="th th-operation">
                                    <td class="td-inner">商品操作</td>
                                </div>
                                <div class="th th-amount">
                                    <td class="td-inner">合计</td>
                                </div>
                                <div class="th th-status">
                                    <td class="td-inner">交易状态</td>
                                </div>
                                <div class="th th-change">
                                    <td class="td-inner">交易操作</td>
                                </div>
                            </div>

                            <div class="order-main">
                                <div class="order-list">

                                    <!--交易成功-->
                                    <div class="order-status5" th:each="order:${orderList}">
                                        <div class="order-title">
                                            <div class="dd-num">订单编号：<a href="javascript:;" th:text="${order.orderNo}">1601430</a>
                                            </div>
                                            <span>生成时间：<a
                                                    th:text="${#dates.format(order.createTime,'yyyy-MM-dd HH:mm:ss')}"></a></span>
                                        </div>
                                        <div class="order-content">
                                            <div class="order-left">
                                                <ul class="item-list" th:each="item:${order.itemList}">
                                                    <li class="td td-item">
                                                        <div class="item-pic">
                                                            <a href="#" class="J_MakePoint">
                                                                <img th:src="@{'/'+${item.subImages}}"
                                                                     class="itempic J_ItemImg">
                                                            </a>
                                                        </div>
                                                        <div class="item-info">
                                                            <div class="item-basic-info">
                                                                <a href="#">
                                                                    <p th:text="${item.productName}"></p>
                                                                    <p class="info-little">颜色：12#川南玛瑙

                                                                </a>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="td td-price">
                                                        <div class="item-price" th:text="${item.price}">
                                                        </div>
                                                    </li>
                                                    <li class="td td-number">
                                                        <div class="item-number">
                                                            ×<span th:text="${item.quantity}"></span>
                                                        </div>
                                                    </li>
                                                    <li class="td td-operation">
                                                        <div class="item-operation">

                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="order-right">
                                                <li class="td td-amount">
                                                    <div class="item-amount">
                                                        合计：<a th:text="${order.totalPrice}"></a>
                                                        <p>含运费：<span>0.00</span></p>
                                                    </div>
                                                </li>
                                                <div class="move-right">
                                                    <li class="td td-status" th:switch="${order.status}">
                                                        <div class="item-status" th:case="10">
                                                            <p class="Mystatus">等待买家付款</p>
                                                            <p class="order-info"><a
                                                                    th:href="@{'/order/cancel/' + ${order.orderNo}}">取消订单</a>
                                                            </p>
                                                            <p class="order-info">
                                                                <a th:href="@{'/order/orderinfo/' + ${order.orderNo} + '/' +${order.shippingId}}">订单详情</a>
                                                            </p>
                                                        </div>
                                                        <div class="item-status" th:case="50">
                                                            <p class="Mystatus">交易成功</p>
                                                            <p class="order-info"><a
                                                                    th:href="@{'/order/orderinfo/' + ${order.orderNo} + '/' +${order.shippingId}}">订单详情</a>
                                                            </p>
                                                            <p class="order-info"><a href="logistics.html">查看物流</a></p>
                                                        </div>
                                                        <div class="item-status" th:case="60">
                                                            <a th:href="@{'/order/orderinfo/' + ${order.orderNo} + '/' +${order.shippingId}}">订单详情</a>
                                                            <p class="Mystatus">交易关闭</p>
                                                        </div>
                                                        <div class="item-status" th:case="20">
                                                            <p class="Mystatus">买家已付款</p>
                                                            <p class="order-info"><a
                                                                    th:href="@{'/order/orderinfo/' + ${order.orderNo}+'/'+${order.shippingId}}">订单详情</a>
                                                            </p>
                                                        </div>
                                                        <div class="item-status" th:case="40">
                                                            <p class="Mystatus">卖家已发货</p>
                                                            <p class="order-info"><a
                                                                    th:href="@{'/order/orderinfo/' + ${order.orderNo}+'/'+${order.shippingId}}">订单详情</a>
                                                            </p>
                                                            <p class="order-info"><a href="logistics.html">查看物流</a></p>
                                                            <p class="order-info"><a href="#">延长收货</a></p>
                                                        </div>
                                                    </li>
                                                    <li class="td td-change">
                                                        <div class="am-btn am-btn-danger anniu"
                                                             th:if="${order.status eq 0 || order.status eq 50 || order.status eq 60}">
                                                            <a th:href="@{'/order/delete/' + ${order.orderNo}}"
                                                               style="color: #FFF;">删除订单</a>
                                                        </div>
                                                        <div class="am-btn am-btn-danger anniu" id="alertMessage"
                                                             th:if="${order.status eq 20}">
                                                            提醒发货
                                                        </div>
                                                        <div class="am-btn am-btn-danger anniu" id="recivedConfirm"
                                                             th:if="${order.status eq 40}">
                                                            确认收货
                                                        </div>
                                                        <a href="pay.html" th:if="${order.status eq 10}">
                                                            <div class="am-btn am-btn-danger anniu">
                                                                一键支付
                                                            </div>
                                                        </a>
                                                    </li>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <!--交易失败-->


                                </div>

                            </div>

                        </div>
                        <div class="am-tab-panel am-fade" id="tab2">

                            <div class="order-top">
                                <div class="th th-item">
                                    <td class="td-inner">商品</td>
                                </div>
                                <div class="th th-price">
                                    <td class="td-inner">单价</td>
                                </div>
                                <div class="th th-number">
                                    <td class="td-inner">数量</td>
                                </div>
                                <div class="th th-operation">
                                    <td class="td-inner">商品操作</td>
                                </div>
                                <div class="th th-amount">
                                    <td class="td-inner">合计</td>
                                </div>
                                <div class="th th-status">
                                    <td class="td-inner">交易状态</td>
                                </div>
                                <div class="th th-change">
                                    <td class="td-inner">交易操作</td>
                                </div>
                            </div>

                            <div class="order-main">
                                <div class="order-list">
                                    <div class="order-status1" th:each="order:${orderList}"
                                         th:if="${order.status eq 10}">
                                        <div class="order-title">
                                            <div class="dd-num">订单编号：<a href="javascript:;" th:text="${order.orderNo}">1601430</a>
                                            </div>
                                            <span th:text="'生成时间：'+${#dates.format(order.createTime,'yyyy-MM-dd HH:mm:ss')}"></span>
                                        </div>
                                        <div class="order-content">
                                            <div class="order-left">
                                                <ul class="item-list" th:each="item:${order.itemList}">
                                                    <li class="td td-item">
                                                        <div class="item-pic">
                                                            <a href="#" class="J_MakePoint">
                                                                <img th:src="@{'/'+${item.subImages}}"
                                                                     class="itempic J_ItemImg">
                                                            </a>
                                                        </div>
                                                        <div class="item-info">
                                                            <div class="item-basic-info">
                                                                <a href="#">
                                                                    <p th:text="${item.productName}"></p>
                                                                    <p class="info-little">颜色：12#川南玛瑙

                                                                </a>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="td td-price">
                                                        <div class="item-price" th:text="${item.price}">
                                                        </div>
                                                    </li>
                                                    <li class="td td-number">
                                                        <div class="item-number">
                                                            ×<span th:text="${item.quantity}"></span>
                                                        </div>
                                                    </li>
                                                    <li class="td td-operation">
                                                        <div class="item-operation">

                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="order-right">
                                                <li class="td td-amount">
                                                    <div class="item-amount">
                                                        合计：<a th:text="${order.totalPrice}"></a>
                                                        <p>含运费：<span>0.00</span></p>
                                                    </div>
                                                </li>


                                                <div class="move-right">
                                                    <li class="td td-status">
                                                        <div class="item-status">
                                                            <p class="Mystatus">等待买家付款</p>
                                                            <p class="order-info"><a th:href="@{/order/cancelOrder}">取消订单</a>
                                                            </p>

                                                        </div>
                                                    </li>
                                                    <li class="td td-change">
                                                        <a th:href="@{'/order/pay/'+${order.orderNo}}">
                                                            <div class="am-btn am-btn-danger anniu">
                                                                一键支付
                                                            </div>
                                                        </a>
                                                    </li>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="am-tab-panel am-fade" id="tab3">
                            <div class="order-top">
                                <div class="th th-item">
                                    <td class="td-inner">商品</td>
                                </div>
                                <div class="th th-price">
                                    <td class="td-inner">单价</td>
                                </div>
                                <div class="th th-number">
                                    <td class="td-inner">数量</td>
                                </div>
                                <div class="th th-operation">
                                    <td class="td-inner">商品操作</td>
                                </div>
                                <div class="th th-amount">
                                    <td class="td-inner">合计</td>
                                </div>
                                <div class="th th-status">
                                    <td class="td-inner">交易状态</td>
                                </div>
                                <div class="th th-change">
                                    <td class="td-inner">交易操作</td>
                                </div>
                            </div>

                            <div class="order-main">
                                <div class="order-list">
                                    <div class="order-status2" th:each="order:${orderList}"
                                         th:if="${order.status eq 20}">
                                        <div class="order-title">
                                            <div class="dd-num">订单编号：<a href="javascript:;" th:text="${order.orderNo}">1601430</a>
                                            </div>
                                            <p>生成时间：<span
                                                    th:text="${#dates.format(order.createTime,'yyyy-MM-dd HH:mm:ss')}"></span>
                                            </p>
                                        </div>

                                        <div class="order-content">
                                            <div class="order-left">
                                                <ul class="item-list" th:each="item:${order.itemList}">
                                                    <li class="td td-item">
                                                        <div class="item-pic">
                                                            <a href="#" class="J_MakePoint">
                                                                <img th:src="@{'/'+${item.subImages}}"
                                                                     class="itempic J_ItemImg">
                                                            </a>
                                                        </div>
                                                        <div class="item-info">
                                                            <div class="item-basic-info">
                                                                <a href="#">
                                                                    <p th:text="${item.productName}"></p>
                                                                    <p class="info-little">颜色：12#川南玛瑙

                                                                </a>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="td td-price">
                                                        <div class="item-price" th:text="${item.price}">
                                                        </div>
                                                    </li>
                                                    <li class="td td-number">
                                                        <div class="item-number">
                                                            ×<span th:text="${item.quantity}"></span>
                                                        </div>
                                                    </li>
                                                    <li class="td td-operation">
                                                        <div class="item-operation">

                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="order-right">
                                                <li class="td td-amount">
                                                    <div class="item-amount">
                                                        合计：<a th:text="${order.totalPrice}"></a>
                                                        <p>含运费：<span>0.00</span></p>
                                                    </div>
                                                </li>

                                                <div class="move-right">
                                                    <li class="td td-status">
                                                        <div class="item-status">
                                                            <p class="Mystatus">买家已付款</p>
                                                            <p class="order-info"><a
                                                                    th:href="@{'/order/orderinfo/' + ${order.orderNo}+'/'+${order.shippingId}}">订单详情</a>
                                                        </div>
                                                    </li>
                                                    <li class="td td-change">
                                                        <div class="am-btn am-btn-danger anniu">
                                                            提醒发货
                                                        </div>
                                                    </li>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="am-tab-panel am-fade" id="tab4">
                            <div class="order-top">
                                <div class="th th-item">
                                    <td class="td-inner">商品</td>
                                </div>
                                <div class="th th-price">
                                    <td class="td-inner">单价</td>
                                </div>
                                <div class="th th-number">
                                    <td class="td-inner">数量</td>
                                </div>
                                <div class="th th-operation">
                                    <td class="td-inner">商品操作</td>
                                </div>
                                <div class="th th-amount">
                                    <td class="td-inner">合计</td>
                                </div>
                                <div class="th th-status">
                                    <td class="td-inner">交易状态</td>
                                </div>
                                <div class="th th-change">
                                    <td class="td-inner">交易操作</td>
                                </div>
                            </div>

                            <div class="order-main">
                                <div class="order-list">
                                    <div class="order-status3" th:each="order:${orderList}"
                                         th:if="${order.status eq 40}">
                                        <div class="order-title">
                                            <div class="dd-num">订单编号：<a href="javascript:;" th:text="${order.orderNo}">1601430</a>
                                            </div>
                                            <span th:text="'生成时间：'+${#dates.format(order.createTime,'yyyy-MM-dd HH:mm:ss')}"></span>
                                        </div>

                                        <div class="order-content">
                                            <div class="order-left">
                                                <ul class="item-list" th:each="item:${order.itemList}">
                                                    <li class="td td-item">
                                                        <div class="item-pic">
                                                            <a href="#" class="J_MakePoint">
                                                                <img th:src="@{'/'+${item.subImages}}"
                                                                     class="itempic J_ItemImg">
                                                            </a>
                                                        </div>
                                                        <div class="item-info">
                                                            <div class="item-basic-info">
                                                                <a href="#">
                                                                    <p th:text="${item.productName}"></p>
                                                                    <p class="info-little">颜色：12#川南玛瑙

                                                                </a>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="td td-price">
                                                        <div class="item-price" th:text="${item.price}">
                                                        </div>
                                                    </li>
                                                    <li class="td td-number">
                                                        <div class="item-number">
                                                            ×<span th:text="${item.quantity}"></span>
                                                        </div>
                                                    </li>
                                                    <li class="td td-operation">
                                                        <div class="item-operation">

                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="order-right">
                                                <li class="td td-amount">
                                                    <div class="item-amount">
                                                        合计：<a th:text="${order.totalPrice}"></a>
                                                        <p>含运费：<span>0.00</span></p>
                                                    </div>
                                                </li>

                                                <div class="move-right">
                                                    <li class="td td-status">
                                                        <div class="item-status">
                                                            <p class="Mystatus">卖家已发货</p>
                                                            <p class="order-info"><a
                                                                    th:href="@{'/order/orderinfo/' + ${order.orderNo}+'/'+${order.shippingId}}">订单详情</a>
                                                            <p class="order-info"><a href="logistics.html">查看物流</a></p>
                                                            <p class="order-info"><a href="#">延长收货</a></p>
                                                        </div>
                                                    </li>
                                                    <li class="td td-change">
                                                        <div class="am-btn am-btn-danger anniu">
                                                            确认收货
                                                        </div>
                                                    </li>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="am-tab-panel am-fade" id="tab5">
                            <div class="order-top">
                                <div class="th th-item">
                                    <td class="td-inner">商品</td>
                                </div>
                                <div class="th th-price">
                                    <td class="td-inner">单价</td>
                                </div>
                                <div class="th th-number">
                                    <td class="td-inner">数量</td>
                                </div>
                                <div class="th th-operation">
                                    <td class="td-inner">商品操作</td>
                                </div>
                                <div class="th th-amount">
                                    <td class="td-inner">合计</td>
                                </div>
                                <div class="th th-status">
                                    <td class="td-inner">交易状态</td>
                                </div>
                                <div class="th th-change">
                                    <td class="td-inner">交易操作</td>
                                </div>
                            </div>

                            <div class="order-main">
                                <div class="order-list">
                                    <!--不同状态的订单-->
                                    <div class="order-status4" th:each="order:${orderList}"
                                         th:if="${order.status eq 50}">
                                        <div class="order-title">
                                            <div class="dd-num">订单编号：<a href="javascript:;" th:text="${order.orderNo}">1601430</a>
                                            </div>
                                            <span th:text="'生成时间：'+${#dates.format(order.createTime,'yyyy-MM-dd HH:mm:ss')}"></span>
                                        </div>

                                        <div class="order-content">
                                            <div class="order-left">
                                                <ul class="item-list" th:each="item:${order.itemList}">
                                                    <li class="td td-item">
                                                        <div class="item-pic">
                                                            <a href="#" class="J_MakePoint">
                                                                <img th:src="@{'/'+${item.subImages}}"
                                                                     class="itempic J_ItemImg">
                                                            </a>
                                                        </div>
                                                        <div class="item-info">
                                                            <div class="item-basic-info">
                                                                <a href="#">
                                                                    <p th:text="${item.productName}"></p>
                                                                    <p class="info-little">颜色：12#川南玛瑙

                                                                </a>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="td td-price">
                                                        <div class="item-price" th:text="${item.price}">
                                                        </div>
                                                    </li>
                                                    <li class="td td-number">
                                                        <div class="item-number">
                                                            ×<span th:text="${item.quantity}"></span>
                                                        </div>
                                                    </li>
                                                    <li class="td td-operation">
                                                        <div class="item-operation">

                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="order-right">
                                                <li class="td td-amount">
                                                    <div class="item-amount">
                                                        合计：<a th:text="${order.totalPrice}"></a>
                                                        <p>含运费：<span>0.00</span></p>
                                                    </div>
                                                </li>
                                                <div class="move-right">
                                                    <li class="td td-status">
                                                        <div class="item-status">
                                                            <p class="Mystatus">交易成功</p>
                                                            <p class="order-info"><a
                                                                    th:href="@{'/order/orderinfo/' + ${order.orderNo}+'/'+${order.shippingId}}">订单详情</a>
                                                            <p class="order-info"><a href="logistics.html">查看物流</a></p>
                                                        </div>
                                                    </li>
                                                    <li class="td td-change">
                                                        <a th:href="@{'/order/commentlist/+'${order.orderNo}}">
                                                            <div class="am-btn am-btn-danger anniu">
                                                                评价商品
                                                            </div>
                                                        </a>
                                                    </li>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>

                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!--底部-->
        <th:block th:include="common :: footer"></th:block>
    </div>
    <th:block th:include="common :: menu"></th:block>
</div>

</body>

</html>